import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'

export default class List extends Component {

	state = { // 初始化状态
        users: [], // users初始值为数组
        isFirst: true, // 是否为第一次打开页面
        isLoading: false, // 请求是否发送
        err: '', // 存储请求相关的错误信息
    } 

	// 更新App的state
    updateAppState = (stateObj) => {
        this.setState(stateObj)
    }

	componentDidMount() {
		// 订阅消息
		// atguigu: 订阅哪个消息的标识
		// 函数带两个参数： 第一个是订阅名，第二个是订阅返回的消息
		this.token = PubSub.subscribe('atguigu', (_, stateObj) => {
			this.setState(stateObj)
		})
	}

	//  如果list组件关闭，则要停掉消息订阅
	componentWillUnmount() {
		PubSub.unsubscribe(this.token)
	}

	render() {
		const {users, isFirst, isLoading, err} = this.state
		return (
			<div className="row">
				{/* <h2>欢迎使用，输入关键字，随后点击搜索</h2>  */}
					{
						isFirst ? <h2>欢迎使用</h2> :
						isLoading ? <h2>Loading.....</h2> :
						err ? <h2 style={{color: 'red'}}>{err}</h2> :
						users.map((userObj) => {
							return (
								<div key={userObj.id} className="card">
									<a rel="noreferrer" target="_blank" href={userObj.html_url}>
										<img alt='head-pro' src={userObj.avatar_url} style={{width: '100px'}} />
									</a>
									<p className="card-text">{userObj.login}</p>
								</div>
							)
						})
					}
				</div>
		)
	}
}
